<template>
  <!-- 搜索 -->
  <view
    class="inp"
    @click="$onTo(`/pages/search/search?swiperData=${swiperData}`)"
  >
    <input
      type="text"
     
      class="search"
      disabled
      :style="{ width: width }"
    />
    <image
      src="../../static/home/search.png"
      mode="scaleToFill"
      class="icon"
    ></image>
    <swiper
      class="swiper_zi"
      vertical="true"
      autoplay="true"
      circular="true"
      interval="3000"
      @change="getItem"
    >
      <swiper-item
        v-for="(item, index) in hotList"
        :key="index"
        :item-id="item"
      >
        <view class="zimubox">
          <view class="swiper_item">{{ item }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
// 这个路由拦截库和小程序搭配有问题，在还没有登录时，还没有触发页面的onLoad，就已经触发了子组件的created了
export default {
  name: "swiperSearch",
  props: {
    width: {
      type: String,
      default: "600rpx",
    },
  },

  data() {
    return {
      hotList: [],
      swiperData: "",
    }
  },

  created() {
    // 搜索页面数据获取
    this.fetchHistorySearch().catch(err => {
      if (err === "no uid") {
        this.eventId = this.$eventEmitter.subscribe("successLoginThenReFetch", this.fetchHistorySearch) // 登录成功时重新加载一下历史搜索数据
      }
    })
  },

  destroyed() {
    this.eventId && this.$eventEmitter.removeHandler("successLoginThenReFetch", this.eventId)
  },

  methods: {
    /**
     * 请求历史搜索
     */
    fetchHistorySearch() {
      return this.$request("hzsx/userWordHistory/searchPage", {}, "get", true).then((res) => {
        this.hotList = res.data?.hotSearchList || []
        this.swiperData = res.data?.hotSearchList[0] || ""
      })
    },

    getItem(vla, it) {
      this.swiperData = this.hotList[vla.detail.current]
    },
  },
}
</script>

<style lang="scss" scoped>
.inp {
  //background-color: #018ffd;
  display: flex;
  justify-content: center;
  position: relative;
  .search {
    width: 600rpx;
    height: 45rpx;
    background: #f9f9f9;
    border-radius: 35rpx;
    margin: 20rpx 0;
    padding: 0 60rpx;
  }
  .icon {
    width: 25rpx;
    height: 25rpx;
    position: absolute;
    top: 31rpx;
    left: 30rpx;
  }
}
.swiper_zi {
  position: absolute;
  width: 50%;
  height: 34rpx;
  top: 28rpx;
  left: 80rpx;
  .zimubox {
    height: 34rpx;
    .swiper_item {
      font-size: 26rpx;
      font-weight: 500;
      color: #ababba;
    }
  }
}
</style>
